<template>
  <div id="luckysheet" class="lucky-sheet"></div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    sheetParams: {
      type: Object,
      default: () => {
        return {
          excelHeader: [],
          excelData: [],
        };
      },
    },
  },
  data() {
    return {
      luckySheet: null,
    };
  },
  mounted() {
    this.initLuckySheet(this.sheetParams);
  },
  methods: {
    getSheetData() {
      return this.luckySheet.getAllSheets();
    },
    // 初始化数据
    initLuckySheet(sheetParams) {
      this.$nextTick(() => {
        var _this = this; //注意这里要重新指定下this对象。
        $(function () {
          if (sheetParams.excelHeader.length != 0 && JSON.stringify(sheetParams.excelData) != '{}') {
            _this.luckySheetOption.hook = {
              workbookCreateAfter: function () {
                _this.dataRendSheet(sheetParams.excelHeader, sheetParams.excelData);
              },
            };
          }
          luckysheet.create(_this.luckySheetOption);
          _this.luckySheet = luckysheet;
        });
      });
    },
    /**接口数据回显 */
    dataRendSheet(excelHeader, excelData) {
      //回显表格表头，第一行
      if (excelHeader.length > 0) {
        const that = this;
        excelHeader.forEach((item1, index1) => {
          that.luckySheet.setCellValue(0, index1, item1);
          //普通回显数据
          if (JSON.stringify(excelData) != '{}') {
            excelData[item1].forEach((item2, index2) => {
              var row = index2 + 1;
              that.luckySheet.setCellValue(row, index1, item2);
            });
          }
        });
      }
    },
    // 加载配置
    luckySheetOption() {
      if (this.luckySheet) {
        this.luckySheet.destroy();
      }
      this.$nextTick(() => {
        const that = this;
        $(function () {
          luckysheet.create({
            container: 'luckysheet', // 设定DOM容器的id
            title: '测试案例', // 设定表格名称
            lang: 'zh', // 设定表格语言
            plugins: ['chart'],
            data: [
              {
                name: 'Sheet1', //工作表名称
                color: '#eee333', //工作表(工作表名称底部边框线)颜色
                index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
                status: 1, //激活状态
                order: 0, //工作表的下标
                hide: 0, //是否隐藏
                row: 5, //行数
                column: 5, //列数
                defaultRowHeight: 20, //自定义行高,单位px
                defaultColWidth: 100, //自定义列宽,单位px
                celldata: [], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
                config: {
                  merge: {}, //合并单元格
                  rowlen: {}, //表格行高
                  columnlen: {}, //表格列宽
                  rowhidden: {}, //隐藏行
                  colhidden: {}, //隐藏列
                  borderInfo: {}, //边框
                  authority: {}, //工作表保护
                },
                scrollLeft: 0, //左右滚动条位置
                scrollTop: 0, //上下滚动条位置
                luckysheet_select_save: [], //选中的区域
                calcChain: [], //公式链
                isPivotTable: false, //是否数据透视表
                pivotTable: {}, //数据透视表设置
                filter_select: {}, //筛选范围
                filter: null, //筛选配置
                luckysheet_alternateformat_save: [], //交替颜色
                luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
                luckysheet_conditionformat_save: {}, //条件格式
                frozen: {}, //冻结行列配置
                chart: [], //图表配置
                zoomRatio: 1, // 缩放比例
                image: [], //图片
                showGridLines: 1, //是否显示网格线
                dataVerification: {}, //数据验证配置
              },
            ],
            showtoolbar: true,
            showtoolbarConfig: {
              undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
              paintFormat: true, //格式刷
              currencyFormat: true, //货币格式
              percentageFormat: true, //百分比格式
              numberDecrease: true, // '减少小数位数'
              numberIncrease: true, // '增加小数位数
              moreFormats: true, // '更多格式'
              font: true, // '字体'
              fontSize: true, // '字号大小'
              bold: true, // '粗体 (Ctrl+B)'
              italic: true, // '斜体 (Ctrl+I)'
              strikethrough: true, // '删除线 (Alt+Shift+5)'
              underline: true, // '下划线 (Alt+Shift+6)'
              textColor: true, // '文本颜色'
              fillColor: true, // '单元格颜色'
              border: true, // '边框'
              mergeCell: true, // '合并单元格'
              horizontalAlignMode: true, // '水平对齐方式'
              verticalAlignMode: true, // '垂直对齐方式'
              textWrapMode: true, // '换行方式'
              textRotateMode: true, // '文本旋转方式'
              image: true, // '插入图片'
              link: true, // '插入链接'
              chart: true, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
              postil: true, //'批注'
              pivotTable: true, //'数据透视表'
              function: true, // '公式'
              frozenMode: true, // '冻结方式'
              sortAndFilter: true, // '排序和筛选'
              conditionalFormat: true, // '条件格式'
              dataVerification: true, // '数据验证'
              splitColumn: true, // '分列'
              screenshot: true, // '截图'
              findAndReplace: true, // '查找替换'
              protection: true, // '工作表保护'
              print: true, // '打印'
            },
            showsheetbar: true, //是否显示底部sheet页按钮
            showsheetbarConfig: {
              add: true, //新增sheet
              menu: true, //sheet管理菜单
              sheet: true, //sheet页显示
            },
            showinfobar: false, //是否显示顶部信息栏
            showstatisticBar: true, //是否显示底部计数栏
            showstatisticBarConfig: {
              count: true, // 计数栏
              view: true, // 打印视图
              zoom: true, // 缩放
            },
            sheetFormulaBar: true, //是否显示公式栏
            allowCopy: true, //是否允许拷贝
            enableAddRow: true, //允许添加行
          });
          that.luckySheet = luckysheet;
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.lucky-sheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100vw;
  height: 500px;
  left: 0px;
  top: 80px;
  bottom: 0px;

  ::v-deep {
    .luckysheet-share-logo,
    #luckysheet_info_detail_update,
    #luckysheet_info_detail_save {
      display: none !important;
    }
  }
}
</style>
